<!-- 开标页面 -->
<template>
  <div class="app-container">

    <el-card class="box-card text-center" v-if="form == null" style="width: 50%;">
      <h1>开标时间未到</h1>
    </el-card>

    <div class="block" v-if="form != null">
      <div style="width: 100%; display: inline-block;" v-show="new Date() - new Date(form.kaiStartTime) < 0">
        <p style="size: 26px;margin-bottom: 15px">🚩距离开标时间还有：</p>
        <el-statistic format="DD天HH小时mm分钟" :value="new Date(form.kaiStartTime)" time-indices title="">
        </el-statistic>
      </div>

      <div style="margin-bottom: 10px;"></div>
      <!-- 当这个为空时,会报错 -->
      <p style="size: 26px;margin-bottom: 15px" v-show="new Date(form.kaiEndTime) - new Date() > 0">🚩距离开标结束时间还有：</p>
      <el-statistic format="DD天HH小时mm分钟" :value="new Date(form.kaiEndTime)" time-indices title=""
        v-show="new Date(form.kaiEndTime) - new Date() > 0">
      </el-statistic>
      <el-image :src="src" class="centered-image" v-show="new Date() - new Date(form.kaiStartTime) > 0">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>

    </div>
  </div>
</template>

<script>
import { getProjectStateAndStartTime } from "@/api/system/purchase.js";
export default {
  name: "",
  data() {
    return {
      isStart: false,
      src: "http://127.0.0.1:9300/statics/2024/12/12/28324854e2a4e4c8856e9c252bad3b8f_20241212152420A003.png",
      iNumber: "",
      form: {},
    };
  },

  methods: {
    getProjectStateAndStartTime() {
      getProjectStateAndStartTime(this.iNumber).then((res) => {
        console.log(res, "斯蒂芬森");

        // if (res.data != null && res.data.kaiStartTime != null) {
        //   // 将字符串转换为日期对象
        //   res.data.kaiStartTime = new Date(res.data.kaiStartTime);
        //   const kaiStartTime = res.data.kaiStartTime;
        //   // 获取当前时间
        //   const now = new Date();
        //   // 计算时间差（毫秒）
        //   const timeDifference = now - kaiStartTime;
        //   // 判断时间差是否为零
        //   if (timeDifference === 0) {
        //     console.log("当前时间等于 kaiStartTime");
        //   } else {
        //     console.log("当前时间不等于 kaiStartTime");
        //   }
        // }
        this.form = res.data;
      });
    },
  },
  mounted() {
    this.iNumber = this.$route.query.iNumber;
    this.getProjectStateAndStartTime();
  },
};
</script>
<style scoped>
.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  transform: translateY(-230px);
}

.block {
  text-align: center;
}

.demonstration {
  font-size: 18px;
  /* 调整文字大小 */
  margin-bottom: 50px;
  /* 将文字下移50px */
  display: block;
}

.countdown {
  font-size: 24px;
  /* 调整时间文字大小 */
}

.centered-image {
  max-width: 60%;
  /* 控制图片最大宽度为60% */
  width: 100%;
  max-height: 60vh;
  /* 控制图片最大高度为60% */
  height: auto;
  display: block;
  margin: auto;
  /* 使图片居中 */
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #f5f7fa;
}

.dot {
  animation: dot-animation 1.5s infinite;
}

@keyframes dot-animation {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>
